<template>
	<view>
		<form @submit="subRefund" report-submit='true'>
			<view class='apply-return'>
				<div class="login-wrapper">
					<div class="shading">
						<!-- <image :src="logoUrl"/> -->
						<image src="/static/images/logo2.png" />
					</div>
				</div>
				<view class='list borRadius14'>
					<view class='item acea-row row-between-wrapper'>
						<view prop="dpName">店铺名称</view>
						<view class='num'><input v-model="form.dpName" placeholder="请输入店铺名称" /></view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view prop="dpRegion">店铺区域</view>
					</view>
					<view class='item acea-row row-between-wrapper' prop="dpRegion">
						<!-- <u-form-item label="店铺区域" style="white-space: nowrap;" prop="dpRegion"></u-form-item> -->
						<u-input placeholder="请选择所在地区" v-model="form.dpRegion" @focus="change()" />
						<u-picker class="region" mode="region" v-model="show" @confirm="confirm"></u-picker>
					
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view prop="dpAddress">店铺详细地址</view>
						<view class='num'><input v-model="form.dpAddress" placeholder="请输入店铺详细地址" /></view>
					</view>
					<view class='item acea-row row-between-wrapper' @tap="toggleTab('region')">
						<view prop="dpSpecies">店铺种类</view>

						<view><u-input placeholder="请选择种类" v-model="form.dpSpecies" @focus="changeZl()" /></view>
						<view><u-select v-model="selectedOption" mode="single-column" :list="options" @confirm="confirmZl">
						</u-select></view>

					</view>
					<view class='item textarea acea-row row-between'>
						<view prop="dpText">店铺介绍</view>
						<textarea placeholder='填写店铺介绍，100字以内' class='num' name="refund_reason_wap_explain"
							v-model="form.dpText"></textarea>
					</view>
					<view class='item acea-row row-between' style="border: none;">
						<view class='title acea-row row-between-wrapper'>
							<view>上传资质（食品经营许可证、养殖许可证、营业执照、其他）</view>
							<view class='tip'>( 最多可上传4张 )</view>
						</view>
						<view class='upload acea-row row-middle'>
							<view class='pictrue' v-for="(item,index) in refund_reason_wap_imgPath" :key="index">
								<image :src='item'></image>
								<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)'></view>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic'
								v-if="refund_reason_wap_imgPath.length < 4">
								<text class='iconfont icon-icon25201'></text>
								<view>上传资质</view>
							</view>
						</view>
					</view>
					<view>
						<u-form-item style="display: flex; align-items: center; justify-content: center;">
							<u-checkbox v-model="checked" shape="circle" active-color="green">已阅读并同意<a
									@click="tanchuanXY()">《入驻协议》</a></u-checkbox>
						</u-form-item>
						<u-modal v-model="showXY" title="入驻协议" @confirm="confirmXY">
							<view class="u-update-content">
								<rich-text :nodes="content"></rich-text>
							</view>
						</u-modal>

					</view>
					<button class='returnBnt bg-color' form-type="submit">申请入驻</button>
				</view>
			</view>
		</form>
	</view>
</template>
<script>
	import {
		getDPZL,
		applyRZ,
		isYSQ
	} from "@/api/renyang.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		components: {
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				refund_reason_wap_img: [],
				refund_reason_wap_imgPath: [],
				index: 0,
				orderId: 0,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				form: {
					dpName: '',
					dpRegion: '',
					dpAddress: '',
					dpSpecies: '',
					dpText: '',
					dpOthersToString: ''
				},
				selectedOption: false, // 默认选中的选项
				dpRegion: [{
					required: true,
					message: '请选择所在地区',
					trigger: 'blur',
				}],
				selectedRegion: ['广东省', '广州市', '海珠区'], // 用于存储选中的地区数组，例如['广东省', '广州市', '海珠区']
				show: false,
				checked: false,
				showXY: false,
				content: `
									1. 修复badge组件的size参数无效问题<br>
									2. 新增Modal模态框组件<br>
									3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
									4. 修复键盘组件在微信小程序上遮罩无效的问题
								`,
				options: [],

			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
					}
				},
				deep: true
			}
		},
		onLoad: function(options) {
			if (this.isLogin) {
				this.getDPZL();
				//查询是否已申请
				this.isYSQ();
			} else {
				toLogin();
			}
		},
		methods: {
			changeZl() {
				this.selectedOption = true
			},
			confirmZl(e) {
				this.form.dpSpecies = e[0].label
				console.log("种类===>", this.form.dpSpecies)
			},
			// 店铺种类下拉内容
			getDPZL: function() {
				let that = this;
				getDPZL().then(res => {
					for (var i = 0; i < res.data.length; i++) {
						var newZl = {
							value: res.data[i].id,
							label: res.data[i].name
						};
						that.options.push(newZl);
					}
				});
			},

			// 查询是否已申请
			isYSQ: function() {
				let that = this;
				isYSQ().then(res => {
					console.log("res=",res.data);
					if(res.data.dpName!=''){
						return that.$util.Tips({
							title: '已申请',
							icon: 'success'
						}, {
							tab: 5,
							url: '/pages/adopt_shop_apply/index'
						});
					}else{
						
					}
					
				});
			},

			confirmXY() {
				this.checked = true;
			},
			tanchuanXY() {
				this.checked = false;
				this.showXY = true;
			},

			change() {
				this.show = true
			},
			confirm(e) {
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.county = e.area.label
				// 省市区拼接
				this.form.dpRegion = e.province.label + "-" + e.city.label + "-" + e.area.label
			},

			/**
			 * 删除图片
			 * 
			 */
			DelPic: function(e) {
				let index = e,
					that = this;
				that.refund_reason_wap_imgPath.splice(index, 1);
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "product",
					pid: 1
				}, function(res) {
					that.refund_reason_wap_imgPath.push(res.data.url);
				});
			},

			/**
			 * 申请入驻
			 */
			subRefund: function(e) {
				let that = this,
				value = e.detail.value;
				if (!that.form.dpName) return that.$util.Tips({
					title: '请填写店铺名称'
				});
				if (!that.form.dpRegion) return that.$util.Tips({
					title: '请选择店铺区域'
				});
				if (!that.form.dpAddress) return that.$util.Tips({
					title: '请填写店铺详细地址'
				});
				if (!that.form.dpSpecies) return that.$util.Tips({
					title: '请选择店铺种类'
				});
				if (!that.form.dpText) return that.$util.Tips({
					title: '请填写店铺介绍'
				});
				if(this.checked == false) return that.$util.Tips({
					title: '请同意入驻协议'
				});
				applyRZ({
					dpName: that.form.dpName,
					dpRegion: that.form.dpRegion,
					dpAddress: that.form.dpAddress,
					dpSpecies: that.form.dpSpecies,
					dpText: that.form.dpText,
					dpOthersToString: that.refund_reason_wap_imgPath
				}).then(res => {
					return that.$util.Tips({
						title: '申请成功',
						icon: 'success'
					}, {
						tab: 5,
						url: '/pages/users/user_return_list/index?isT=1'
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-wrapper {
		padding: 30rpx;

		.shading {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;

			/* #ifdef APP-VUE */
			margin-top: 50rpx;
			/* #endif */
			/* #ifndef APP-VUE */

			margin-top: 50rpx;
			/* #endif */


			image {
				width: 180rpx;
				height: 180rpx;
			}
		}
	}

	.apply-return {
		padding: 20rpx 30rpx 70rpx 30rpx;
	}

	.apply-return .list {
		background-color: #fff;
		margin-top: 18rpx;
		padding: 0 24rpx 70rpx 24rpx;
	}

	.apply-return .list .item {
		min-height: 90rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		color: #333;
	}

	.apply-return .list .item .num {
		color: #282828;
		width: 427rpx;
		text-align: right;
	}

	.apply-return .list .item .num .picker .reason {
		width: 385rpx;
	}

	.apply-return .list .item .num .picker .iconfont {
		color: #666;
		font-size: 30rpx;
		margin-top: 2rpx;
	}

	.apply-return .list .item.textarea {
		padding: 24rpx 0;
	}

	.apply-return .list .item textarea {
		height: 100rpx;
		font-size: 30rpx;
	}

	.apply-return .list .item .placeholder {
		color: #bbb;
	}

	.apply-return .list .item .title {
		height: 95rpx;
		width: 100%;
	}

	.apply-return .list .item .title .tip {
		font-size: 30rpx;
		color: #bbb;
	}

	.apply-return .list .item .upload {
		padding-bottom: 36rpx;
	}

	.apply-return .list .item .upload .pictrue {
		border-radius: 14rpx;
		margin: 22rpx 23rpx 0 0;
		width: 156rpx;
		height: 156rpx;
		position: relative;
		font-size: 24rpx;
		color: #bbb;
	}

	.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
		margin-right: 0;
	}

	.apply-return .list .item .upload .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
	}

	.apply-return .list .item .upload .pictrue .icon-guanbi1 {
		position: absolute;
		font-size: 45rpx;
		top: -10rpx;
		right: -10rpx;
	}

	.apply-return .list .item .upload .pictrue .icon-icon25201 {
		color: #bfbfbf;
		font-size: 50rpx;
	}

	.apply-return .list .item .upload .pictrue:nth-last-child(1) {
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}

	.apply-return .returnBnt {
		font-size: 32rpx;
		color: #fff;
		width: 100%;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 43rpx auto;
	}
</style>